<template>
  <header class="header">
    <div class="logo">
      <h1 class="text-2xl md:text-3xl font-bold text-blue-700">
        <a href="/searchpaper">智能文献检索系统</a>
      </h1>
    </div>

    <nav class="nav">
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden menu-btn flex items-center gap-1" @click="toggleMenu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <span>菜单</span>
      </button>

      <!-- 导航菜单 -->
      <div :class="['nav-items', {'hidden': !isMenuOpen, 'md:flex': true}]">
        <div class="location-info">
          <i class="location-icon">📍</i>
          <span class="location-text">{{ locationInfo }}</span>
        </div>
        <router-link to="/subscribe">订阅</router-link>
        <router-link to="/about">关于</router-link>
        <div class="emoji-container">
          <img src="https://api.iconify.design/emojione:blue-book.svg" class="emoji" alt="blue book">
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const locationInfo = ref<string>('加载中...')
const isMenuOpen = ref<boolean>(false)

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

onMounted(async () => {
  try {
    const response = await fetch('http://ip-api.com/json/')
    const data = await response.json()
    
    if (data.status === 'success') {
      const ipParts = data.query.split('.')
      ipParts[2] = '***'
      ipParts[3] = '***'
      
      const maskedIP = ipParts.join('.')
      locationInfo.value = `IP: ${maskedIP} | 城市: ${data.city}`
    } else {
      throw new Error('获取位置信息失败')
    }
  } catch (error) {
    console.error('获取位置信息失败:', error)
    locationInfo.value = '无法获取位置'
  }
})
</script>

<style scoped>
.header {
  padding: 0.5rem 1rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .header {
    padding: 1rem 2rem;
  }
}

.logo h1 {
  font-family: "楷体", KaiTi, serif;
  color: #1d4ed8;
}

.nav {
  position: relative;
}

.menu-btn {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-items {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  z-index: 50;
}

@media (min-width: 768px) {
  .nav-items {
    position: static;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0;
    box-shadow: none;
  }
}

.nav a {
  display: block;
  padding: 0.5rem 0;
  text-decoration: none;
  color: #333;
  font-family: "楷体", KaiTi, serif;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .nav a {
    padding: 0;
    font-size: 1.1rem;
  }
}

.nav a.router-link-active {
  color: #1d4ed8;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #4b5563;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .location-info {
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

.location-icon {
  font-size: 1.2rem;
}

.location-text {
  font-family: "微软雅黑", "Microsoft YaHei", sans-serif;
}

.emoji-container {
  width: 48px;
  height: 48px;
  margin: 0.5rem auto;
  border: 2px solid #1d4ed8;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .emoji-container {
    width: 64px;
    height: 64px;
    margin-left: 1rem;
    margin-top: 0;
    padding: 8px;
  }
}

.emoji {
  width: 100%;
  height: 100%;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}
</style>